<template>
  <Page class="min-h-screen bg-gradient-to-br from-[#f5f5f5] to-[#eef2f7] pb-[40rpx]">
    <view class="max-w-[750rpx] mx-auto">
      <!-- 头部区域 -->
      <PageHeader title="能力提升" :showBack="true" :onlyBack="true"/>
      <view
          class="bg-gradient-to-r from-[#165DFF] to-[#1890ff] sticky top-0 z-[2] text-white px-[32rpx] pt-[100rpx] rounded-b-[32rpx] mb-[-40rpx] relative shadow-md">
        <!-- 返回按钮 -->
        <SearchView/>
        <view class="flex overflow-x-auto py-[24rpx] gap-x-[20rpx] my-[40rpx_0_24rpx]">
          <view v-for="(category, index) in categories" :key="index"
                class="flex-0 flex-none bg-white rounded-[24rpx] p-[16rpx] text-center shadow-md min-w-[120rpx] cursor-pointer transition-all duration-300"
                :class="{
            'bg-blue-500 text-white font-bold shadow-lg':
              activeCategory === index,
            'text-gray-500': activeCategory !== index,
          }" @click="activeCategory = index">
            <text class="text-[26rpx]">{{ category.name }}</text>
          </view>
        </view>
      </view>

      <!-- 分类区域 -->
      <view class="box-border p-[20rpx] mt-[20rpx]">
        <!-- 精选课程 -->
        <view class="flex justify-between items-center my-[30rpx]">
          <h2 class="text-[32rpx] font-bold text-[#222]">精选课程</h2>
          <view @tap="goMore(1)" class="text-[#165DFF] text-[24rpx]">查看全部
            <IconFont name="right" class="ml-[10rpx]" size="12"/>
          </view>
        </view>
        <view class="grid grid-cols-2 gap-[20rpx] mb-[24rpx]">
          <view v-for="course in allCuratedCourses" :key="course.id"
                class="bg-white rounded-[24rpx] overflow-hidden shadow-md transition-transform duration-300 hover:translate-y-[-8rpx]"
                @click="handleCourseClick(course)">
            <!--<view class="h-[140rpx] relative overflow-hidden">
              <image :src="course.image" mode="widthFix" class="w-full h-full object-cover" />
              <view
                class="absolute top-[16rpx] right-[16rpx] bg-[#9b59b6] text-white text-[20rpx] px-[12rpx] rounded-[16rpx] font-bold"
                v-if="course.badge">{{ course.badge }}</view>
            </view>-->
            <view class="p-[20rpx]">
              <view class="font-bold mb-[12rpx] text-[26rpx] block line-clamp-2">
                {{ course.title }}
              </view>
              <view class="flex items-center mb-[12rpx] text-[22rpx] text-[#7f8c8d]">
                <nut-avatar
                    img: src="course.teachers_pic"
                    class="w-[32rpx] h-[32rpx] rounded-full mr-[12rpx]"
                />
                <text>{{ course.teacher_name }}</text>
              </view>
              <view class="flex justify-between text-[22rpx] text-[#7f8c8d]">
                <view>
                  <IconFont name="icon-users" class="inline-block mr-[6rpx]"/>
                  {{
                    course.member_number
                  }}
                </view>
                <view class="text-[#f39c12] font-bold text-[26rpx]">{{
                    course.price
                  }}
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 学习进度 -->
        <view class="bg-white rounded-[32rpx] overflow-hidden shadow-md mb-[32rpx]">
          <view class="p-[24rpx_24rpx_16rpx] bg-gradient-to-r from-[#9b59b6] to-[#8e44ad] text-white rounded-t-[32rpx]">
            <h2 class="flex items-center text-[32rpx] font-bold">
              <IconFont name="icon-star" class="mr-[12rpx]"/>
              我的学习进度
            </h2>
          </view>
          <view class="p-[20rpx]">
            <view v-for="(progress, index) in learningProgress" :key="index"
                  class="flex mb-[20rpx] pb-[20rpx] border-b border-[#e0e0e0] last:border-b-0 last:mb-0 last:pb-0">
              <view class="w-[120rpx] h-[96rpx] rounded-[16rpx] overflow-hidden flex-shrink-0 mr-[20rpx]">
                <image :src="progress.image" mode="widthFix" class="w-full h-full object-cover"/>
              </view>
              <view class="flex-1">
                <h3 class="font-bold mb-[8rpx] text-[26rpx]">
                  {{ progress.title }}
                </h3>
                <view class="h-[8rpx] bg-[#ecf0f1] rounded-[4rpx] overflow-hidden mt-[12rpx]">
                  <view class="h-full bg-[#2ecc71] rounded-[4rpx]" :style="{ width: progress.percentage + '%' }"/>
                </view>
                <view class="flex justify-between text-[22rpx] text-[#7f8c8d] mt-[12rpx]">
                  <text>{{ progress.chapters }}</text>
                  <text>{{ progress.percentage }}% 完成</text>
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 学习统计 -->
        <view class="grid grid-cols-3 gap-[20rpx] my-[24rpx_0]">
          <view v-for="(stat, index) in stats" :key="index"
                class="bg-white rounded-[24rpx] p-[24rpx] text-center shadow-md">
            <view
                class="w-[48rpx] h-[48rpx] rounded-full mx-auto mb-[12rpx] flex items-center justify-center text-[28rpx]">
              <IconFont :name="stat.icon"/>
            </view>
            <view class="text-[32rpx] font-bold mb-[6rpx]">{{ stat.value }}</view>
            <view class="text-[22rpx] text-[#7f8c8d]">{{ stat.label }}</view>
          </view>
        </view>

        <!-- 热门推荐 -->
        <view class="flex justify-between items-center my-[30rpx]">
          <h2 class="text-[32rpx] font-bold text-[#222]">热门推荐</h2>
          <view @tap="goMore(2)" class="text-[#165DFF] text-[24rpx] flex items-center">更多推荐
            <IconFont name="right" class="ml-[10rpx]" size="12"/>
          </view>
        </view>
        <view class="grid grid-cols-2 gap-[20rpx] mb-[24rpx]">
          <view v-for="course in allpopularRecommendationCourses" :key="course.id"
                class="bg-white rounded-[24rpx] overflow-hidden shadow-md transition-transform duration-300 hover:translate-y-[-8rpx]"
                @click="handleCourseClick(course)">
            <!--<view class="h-[140rpx] relative overflow-hidden">
              <image :src="course.image" mode="widthFix" class="w-full h-full object-cover"/>
              <view
                  class="absolute top-[16rpx] right-[16rpx] bg-[#9b59b6] text-white text-[20rpx] px-[12rpx] rounded-[16rpx] font-bold"
                  v-if="course.badge">{{ course.badge }}
              </view>
            </view>-->
            <view class="p-[20rpx]">
              <h3 class="font-bold mb-[12rpx] text-[26rpx] overflow-hidden">
                {{ course.title }}
              </h3>
              <view class="flex items-center mb-[12rpx] text-[22rpx] text-[#7f8c8d]">
                <nut-avatar
                    img: src="course.teachers_pic"
                    class="w-[32rpx] h-[32rpx] rounded-full mr-[12rpx]"
                />
                <text>{{ course.teacher_name }}</text>
              </view>
              <view class="flex justify-between text-[22rpx] text-[#7f8c8d]">
                <view>
                  <IconFont name="icon-users" class="inline-block mr-[6rpx]"/>
                  {{
                    course.member_number
                  }}
                </view>
                <view class="text-[#f39c12] font-bold text-[26rpx]">{{
                    course.price
                  }}
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 学习路径 -->
        <view class="bg-white rounded-[32rpx] p-[32rpx] shadow-md mb-[32rpx]">
          <view class="flex justify-between items-center mb-[24rpx]">
            <h2 class="text-[32rpx] font-bold text-[#222]">学习路径</h2>
            <navigator url="#" class="text-[#165DFF] text-[24rpx]">查看全部
              <IconFont name="right" class="ml-[10rpx]" size="12"/>
            </navigator>
          </view>
          <view
              class="bg-gradient-to-r from-[#4a69bd] to-[#6a89cc] rounded-[24rpx] p-[32rpx] text-white relative overflow-hidden">
            <view
                class="absolute top-[-50rpx] right-[-30rpx] w-[150rpx] h-[150rpx] rounded-full bg-[rgba(255,255,255,0.1)]"/>
            <h3 class="text-[28rpx] mb-[16rpx] relative font-bold">
              成为前端开发专家
            </h3>
            <p class="text-[22rpx] mb-[24rpx] relative">
              通过系统学习HTML、CSS、JavaScript及流行框架，掌握前端开发核心技能
            </p>
            <nut-button
                class="bg-white text-[#4a69bd] border-none rounded-[32rpx] px-[32rpx] py-[16rpx] font-bold text-[26rpx] min-h-[60rpx] shadow-md"
                @click="handlePathClick('成为前端开发专家')">
              开始学习
            </nut-button>
          </view>
        </view>
      </view>
    </view>
  </Page>
</template>

<script setup lang="ts">
import {ref} from "vue";
import Taro from "@tarojs/taro";
import {IconFont} from "@nutui/icons-vue-taro";
import {Input as nutInput, Button as nutButton} from "@nutui/nutui-taro";
import SearchView from "@/components/SearchView.vue";
import PageHeader from "@/components/PageHeader.vue";
import {post} from "@/utils/request";
// import { navigator } from '@tarojs/components'

//获取课程数据的格式
interface CourseColumn {
  member_id: null,
  teachers_pic: null,
  sign_rate: null,
  teacher_name: null,
  member_number: null,
  teachers_introduction: null,
  create_time: number,
  pay_number: null,
  title: null,
  type: null,
  cycle_type: null,
  cycle: null,
  cover: null,
  update_time: null | number;
  pay_status: null,
  total_amount: null,
  price: null,
  progress: null,
  id: number,
  introduction: null,
  status: number
}

interface CourseItem {
  columns: CourseColumn;
  columnNames: string[];
  columnValues: (null | number | string)[];
}
//接收精选课程
const allCuratedCourses = ref([])
//接收热门推荐
const allpopularRecommendationCourses = ref([])
getCuratedCourses()
popularRecommendation()
//获取精选课程数据
function getCuratedCourses() {
  //分页和类型参数
  const queryParams = {
    pageNo: 1,           // 第1页
    pageSize: 4,        // 每页4条
    //trainingId: 123,
    type: 0
  }
  post('/training/all', queryParams).then(res => {
    //console.log("res",res)
    //TODO:很多页面需要展示的数据没有获取
    allCuratedCourses.value = res.data.map((item: CourseItem) => ({
      teacher_name: item.columns.teacher_name,
      cover: item.columns.cover,
      teachers_pic: item.columns.teachers_pic,
      title: item.columns.title,
      price: item.columns.price,
      member_id: item.columns.member_id,
      member_number: item.columns.member_number,
      create_time: item.columns.create_time,
      type: item.columns.type,
      id: item.columns.id
    }));
    //console.log("课程列表",allCourses.value)
  })
}
//获取热门推荐数据
function popularRecommendation(){
  //分页和类型参数
  const queryParams = {
    pageNo: 1,           // 第1页
    pageSize: 2,        // 每页4条
    //trainingId: 123,
    type: 0
  }
  post('/training/all', queryParams).then(res => {
    //console.log("res",res)
    //TODO:很多页面需要展示的数据没有获取
    allpopularRecommendationCourses.value = res.data.map((item: CourseItem) => ({
      teacher_name: item.columns.teacher_name,
      cover: item.columns.cover,
      teachers_pic: item.columns.teachers_pic,
      title: item.columns.title,
      price: item.columns.price,
      member_id: item.columns.member_id,
      member_number: item.columns.member_number,
      create_time: item.columns.create_time,
      type: item.columns.type,
      id: item.columns.id
    }));
    //console.log("课程列表",allCourses.value)
  })
}
// 返回上一页
const goBack = () => {
  Taro.navigateBack({
    delta: 1,
  });
};

// 分类数据
const categories = [
  {name: "编程", icon: "icon-code"},
  {name: "设计", icon: "icon-paint-brush"},
  {name: "营销", icon: "icon-chart-line"},
  {name: "语言", icon: "icon-language"},
  {name: "音乐", icon: "icon-music"},
  {name: "摄影", icon: "icon-camera"},
  {name: "商业", icon: "icon-briefcase"},
];

// 精选课程数据
const featuredCourses = [
  {
    title: "Web开发全栈训练营 - 2023最新版",
    image:
        "https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80",
    badge: "热门",
    instructor: "张教授",
    instructorInitial: "张",
    students: "1.2万+",
    price: "¥399",
  },
  {
    title: "Python数据分析与人工智能实战",
    image:
        "https://images.unsplash.com/photo-1547658719-da2b51169166?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80",
    badge: "新课程",
    instructor: "王博士",
    instructorInitial: "王",
    students: "8,500+",
    price: "¥299",
  },
  {
    title: "UI/UX设计大师班 - 从入门到精通",
    image:
        "https://images.unsplash.com/photo-1542744095-291d1f67b221?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80",
    instructor: "李设计师",
    instructorInitial: "李",
    students: "9,200+",
    price: "¥349",
  },
  {
    title: "Flutter跨平台移动应用开发",
    image:
        "https://images.unsplash.com/photo-1550439062-609e1531270e?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80",
    instructor: "陈工程师",
    instructorInitial: "陈",
    students: "6,700+",
    price: "¥279",
  },
];

// 推荐课程数据
const recommendedCourses = [
  {
    title: "数据科学实战：Python与机器学习",
    image:
        "https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80",
    badge: "限时优惠",
    instructor: "刘博士",
    instructorInitial: "刘",
    students: "11,400+",
    price: "¥459",
  },
  {
    title: "JavaScript高级编程与框架应用",
    image:
        "https://images.unsplash.com/photo-1553877522-43269d4ea984?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80",
    instructor: "赵工程师",
    instructorInitial: "赵",
    students: "7,800+",
    price: "¥329",
  },
];

// 学习进度数据
const learningProgress = [
  {
    title: "Web开发全栈训练营",
    image:
        "https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80",
    chapters: "12/20 章节",
    percentage: 65,
  },
  {
    title: "Flutter跨平台开发",
    image:
        "https://images.unsplash.com/photo-1550439062-609e1531270e?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80",
    chapters: "6/20 章节",
    percentage: 30,
  },
];

// 统计数据
const stats = [
  {
    type: "learning",
    icon: "icon-book-open",
    value: "5",
    label: "学习中",
  },
  {
    type: "completed",
    icon: "icon-medal",
    value: "12",
    label: "已完成",
  },
  {
    type: "hours",
    icon: "icon-clock",
    value: "86",
    label: "学习小时",
  },
];

// 底部导航数据
const footerNav = [
  {name: "首页", icon: "icon-home"},
  {name: "我的课程", icon: "icon-book"},
  {name: "发现", icon: "icon-compass"},
  {name: "我的", icon: "icon-user"},
];

// 活跃状态
const activeCategory = ref(0);
const activeNav = ref(0);

// 处理课程点击
const handleCourseClick = (item) => {
  // Taro.showToast({
  //   title: `即将进入课程: ${title}`,
  //   icon: "none",
  //   duration: 2000,
  // });
  //console.log("ID",item.id)
  Taro.navigateTo({
    url: `/pages/course/detail?id=${item.id}`,
  });
};

// 处理学习路径点击
const handlePathClick = (pathName) => {
  Taro.showToast({
    title: `开始${pathName}学习路径！`,
    icon: "none",
    duration: 2000,
  });
};

const goMore = (n) => {
  Taro.navigateTo({
    url: '/pages/course/list'
  })
}
</script>
